import {computed} from 'vue'
import { useDark, useToggle } from '@vueuse/core'

/**
 * 是否为暗黑模式（默认否）
 */
const isDark = useDark()

/**
 * 白天与黑夜模式图标
 */
const lightIcon = '<span class="iconfont icon-sunbaitian-taiyang"></span>'
const darkIcon = '<span class="iconfont icon-yejianmoshi"></span>'
export const themeIcon = computed(() => {
    return isDark.value ? darkIcon : lightIcon
})

/**
 * naive 使用的主题
 */
import {darkTheme as naiveDarkTheme} from 'naive-ui'
export const naiveTheme = computed(() => {
    return isDark.value ? naiveDarkTheme : null
})

/**
 * ant design 使用的主题算法
 */
import {theme as antTheme} from 'ant-design-vue'
export const antThemeAlgori = computed(() => {
    return isDark.value ? antTheme.darkAlgorithm : null
})

/**
 * 主题切换
 */
export const changeTheme = useToggle(isDark)